<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toRunningManagement">查看详情 <a-icon type="right-circle"/></router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="设备运行状态数量">
            <opacity-bar></opacity-bar>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="耗电量/耗气量">
            <a-button-group slot="extra">
              <a-button v-for="(val, index) in consumeType" :type="val.type" @click="handleChange(val)" :key="index">{{
                val.name
              }}</a-button>
            </a-button-group>
            <icon-bar :chartData="consumeData"></icon-bar>
          </a-card>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <div class="target-area-box">
              <p>当前区域：{{ targetAreaNum.name }}</p>
              <p>总数：{{ targetAreaNum.total }}</p>
              <p>正常数：{{ targetAreaNum.resolve }}</p>
              <p>故障数：{{ targetAreaNum.reject }}</p>
              <p>掉线率：{{ ((targetAreaNum.reject / targetAreaNum.total) * 100).toFixed(2) }}%</p>
            </div>
            <map-chart :targetArea="targetArea" @mapChange="mapChange" />
            <ul class="supplier-list">
              <li
                v-for="(item, index) in areaList"
                :key="index"
                :class="{ checked: item.checked }"
                @click="supplierClick(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <a-row :gutter="8" :style="{ padding: '16px', background: 'rgb(12,16,61)' }">
            <a-col :span="12">
              <a-table class="chart-table" :pagination="pagination" :columns="columns" :dataSource="tableData">
              </a-table>
            </a-col>
            <a-col :span="12">
              <small-pie></small-pie>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="7">
          <a-card
            class="index-ant-card"
            :style="{ 'margin-bottom': '16px', height: '364px' }"
            size="small"
            title="报警信息"
          >
            <a-list class="chart-list" size="small" :dataSource="infoData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-icon type="exclamation-circle" theme="twoTone" twoToneColor="#eb2f96" v-if="item.type === 'err'" />
                <a-icon type="exclamation-circle" theme="twoTone" twoToneColor="#52c41a" v-else />
                <span class="title">{{ item.value }}</span>
                <span class="date">2020.02.29</span>
              </a-list-item>
            </a-list>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="能效比排名">
            <simple :chartData="areaFinishingRate" :type="'scale'" />
          </a-card>
        </a-col>
      </a-row>
    </a-layout-content>
  </div>
</template>

<script>
import OpacityBar from '@/components/CleanBaskDemo/opacityBar'
import IconBar from '@/components/CleanBaskDemo/iconBar'
import MapChart from '@/components/CleanBaskDemo/map'
import SmallPie from '@/components/CleanBaskDemo/smallPie'
import NormalBar from '@/components/CleanBaskDemo/normalBar'
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
import Simple from '@/components/CleanBaskDemo/simple'
export default {
  name: 'RunningManagement',
  components: {
    OpacityBar,
    IconBar,
    MapChart,
    SmallPie,
    NormalBar,
    NumAnimate,
    Simple
  },
  data () {
    return {
      visible: false,
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      targetAreaNum: {
        name: '清徐县',
        total: 700,
        resolve: 500,
        reject: 200
      },
      areaAllNum: [
        { name: '清徐县', total: 700, resolve: 200, reject: 500 },
        { name: '阳曲县', total: 800, resolve: 500, reject: 300 },
        { name: '娄烦县', total: 900, resolve: 700, reject: 200 },
        { name: '小店区', total: 1000, resolve: 800, reject: 200 },
        { name: '迎泽区', total: 600, resolve: 500, reject: 100 },
        { name: '杏花岭区', total: 700, resolve: 500, reject: 200 },
        { name: '尖草坪区', total: 900, resolve: 700, reject: 200 },
        { name: '万柏林区', total: 1100, resolve: 900, reject: 200 },
        { name: '晋源区', total: 800, resolve: 700, reject: 100 },
        { name: '古交市', total: 700, resolve: 500, reject: 200 }
      ],
      // 设备品牌数量
      areaUsertNum: {
        name: '本及行政区域用户数',
        data: [
          { name: '煤改气', value: 3685 },
          { name: '煤改电', value: 1456 },
          { name: '集中供热', value: 856 },
          { name: '其他', value: 1263 }
        ],
        total: 7260
      },
      // 不同供应商产品数量排名
      supplierProductNum: {
        name: '不同供应商产品数量排名',
        data: [
          { name: '小米', subVal: 6500, value: 0.65 },
          { name: '美的', subVal: 5200, value: 0.52 },
          { name: '海尔', subVal: 4800, value: 0.48 },
          { name: '史密斯', subVal: 4200, value: 0.42 },
          { name: '海格', subVal: 3800, value: 0.38 },
          { name: '格力', subVal: 3200, value: 0.32 },
          { name: '奥克斯', subVal: 2600, value: 0.26 },
          { name: '刀锋', subVal: 2200, value: 0.22 },
          { name: '男爵', subVal: 1600, value: 0.16 }
        ]
      },
      // 年度用户汇总
      yearUserNum: {
        name: '历年用户数情况',
        data: [
          { num3: 407, num2: 150, num1: 107, name: '刘家堡乡' },
          { num3: 466, num2: 300, num1: 203, name: '坞城街道' },
          { num3: 587, num2: 366, num1: 207, name: '营盘街道' },
          { num3: 769, num2: 580, num1: 303, name: '西温庄' },
          { num3: 410, num2: 288, num1: 90, name: '北格镇' },
          { num3: 564, num2: 456, num1: 303, name: '北营街道' },
          { num3: 379, num2: 254, num1: 90, name: '小店街道' }
        ]
      },
      allUserNumber: 5411, // 累计改造完成用户数
      consumeType: [
        { name: '耗电量', type: 'primary' },
        { name: '耗气量', type: '' }
      ],
      consumeData: { name: '耗电量', value: 126 },
      // table数据
      pagination: {
        hideOnSinglePage: true
      },
      columns: [
        {
          title: '室温区间',
          dataIndex: 'section'
        },
        {
          title: '户数',
          dataIndex: 'num'
        },
        {
          title: '占比',
          dataIndex: 'scale'
        }
      ],
      tableData: [
        {
          key: '1',
          section: '16℃以下',
          num: '1456',
          scale: '45%'
        },
        {
          key: '2',
          section: '16-18℃',
          num: '895',
          scale: '28%'
        },
        {
          key: '3',
          section: '18-20℃',
          num: '369',
          scale: '16%'
        },
        {
          key: '4',
          section: '20℃以上',
          num: '213',
          scale: '11%'
        }
      ],
      // 报警信息
      infoData: [
        { type: 'err', value: '清徐县王家塔门牌号26号空气源设备供水温度过高，请注意及时调整温度' },
        { type: 'suc', value: '清徐县王家塔门牌号26号空气源设备供水温度正常' },
        { type: 'err', value: '清徐县王家塔门牌号26号空气源设备供水温度过高，请注意及时调整温度' },
        { type: 'suc', value: '清徐县王家塔门牌号26号空气源设备供水温度正常' },
        { type: 'err', value: '清徐县王家塔门牌号26号空气源设备供水温度过高，请注意及时调整温度' },
        { type: 'suc', value: '清徐县王家塔门牌号26号空气源设备供水温度正常' },
        { type: 'err', value: '清徐县王家塔门牌号26号空气源设备供水温度过高，请注意及时调整温度' },
        { type: 'suc', value: '清徐县王家塔门牌号26号空气源设备供水温度正常' }
      ],
      // 能效比排名
      areaFinishingRate: [
        { name: '小米', subVal: 65, value: 0.65 },
        { name: '美的', subVal: 52, value: 0.52 },
        { name: '海尔', subVal: 48, value: 0.48 },
        { name: '史密斯', subVal: 42, value: 0.42 },
        { name: '海格', subVal: 38, value: 0.38 },
        { name: '格力', subVal: 32, value: 0.32 },
        { name: '奥克斯', subVal: 26, value: 0.26 }
      ]
    }
  },
  methods: {
    supplierClick (index) {
      this.visible = true
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaNum = this.areaAllNum.find(item => item.name === ele.name)
        }
      })
    },
    mapChange (name) {
      this.visible = true
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaNum = this.areaAllNum.find(item => item.name === ele.name)
        }
      })
    },
    handleChange (val) {
      this.consumeType.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '耗电量':
          this.consumeData = { name: '耗电量', value: 126 }
          return
        case '耗气量':
          this.consumeData = { name: '耗气量', value: 326 }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .target-area-box {
      position: absolute;
      bottom: 16px;
      left: 16px;
      color: #fff;
      z-index: 10;
      background: #060d3c;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid rgb(11, 26, 92);
      p {
        margin-bottom: 0;
        line-height: 30px;
        font-size: 12px;
      }
    }
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
